<template src="./template.html"></template>
<script>
import ChartCircle from 'components/chart-circle'
import ChartLine from 'components/chart-line'
import ChartRadar from 'components/chart-radar'
import { getExerciseReport, getExercise } from '../../../models'
import VideoPreviewModal from '@/js/components/video-preview-modal'
import apiUrls from '@/js/common/api-urls'

export default {
  props: {
    isFollow: {
      type: Boolean,
      default: true
    },
    exerciseId: {
      type: String,
      default: ''
    },
    lessonId: {
      type: String,
      default: ''
    },
    courseId: {
      type: String,
      default: ''
    },
    exerciseType: {
      type: String,
      default: ''
    }
  },
  components: { ChartCircle, ChartLine, ChartRadar, VideoPreviewModal },
  data() {
    return {
      currExerciseNumber: 0,
      exerciseList: [],
      infos: {},
      videoPreviewModalVisible: false,
      videoInfo: {
        url: '',
        screenshotUrl: ''
      }
    }
  },
  computed: {
    reportCardList() {
      const cardList = [
        {
          title: '完整度',
          tag: '优秀',
          tagClass: '',
          progress: Number(this.infos.completeness) || 0,
          progressColor: '#2AB55E',
          content: this.infos.completenessMessage || ''
        },
        {
          title: '准确度',
          tag: '优秀',
          tagClass: '',
          progress: Number(this.infos.fillWordsStuttering) || 0,
          progressColor: '#2AB55E',
          content: this.infos.accuracyMessage || ''
        },
        {
          title: '流畅度',
          tag: '优秀',
          tagClass: '',
          progress: Number(this.infos.fluency) || 0,
          progressColor: '#2AB55E',
          content: this.infos.fluencyMessage || ''
        },
        {
          title: '自信度',
          tag: '优秀',
          tagClass: '',
          progress: Number(this.infos.confidence) || 0,
          progressColor: '#2AB55E',
          content: this.infos.confidenceMessage || ''
        },
        {
          title: '语速音量',
          tag: '优秀',
          tagClass: '',
          progress: Number(this.infos.speedVolume) || 0,
          progressColor: '#2AB55E',
          content: this.infos.speedVolumeMessage || ''
        }
      ]
      const rangeInfo = {
        1: { tagClass: 'progress-tag-red', tag: '需改进', progressColor: '#F02525' },
        2: { tagClass: 'progress-tag-yellow', tag: '一般', progressColor: '#F28F15' },
        3: { tagClass: 'progress-tag-blue', tag: '良好', progressColor: '#315BF4' },
        4: { tagClass: '', tag: '优秀', progressColor: '#2AB55E' },
        5: { tagClass: '', tag: '卓越', progressColor: '#2AB55E' }
      }
      console.log('cardList', cardList)
      cardList.forEach(item => {
        let progress = 1
        if (item.progress <= 59) {
          progress = 1
        } else if (item.progress >= 59 && item.progress <= 69) {
          progress = 2
        } else if (item.progress >= 69 && item.progress <= 85) {
          progress = 3
        } else if (item.progress >= 85 && item.progress <= 95) {
          progress = 4
        } else if (item.progress >= 95 && item.progress <= 100) {
          progress = 5
        }
        item.tagClass = rangeInfo[progress].tagClass
        item.tag = rangeInfo[progress].tag
        item.progressColor = rangeInfo[progress].progressColor
      })
      return cardList
    },
  },
  watch: {
    exerciseId: {
      handler() {
        if (this.exerciseId) {
          console.log('exerciseId--1', this.exerciseId)
          this.$getExerciseReport()
        }
      },
    }
  },
  mounted() {
    console.log('exerciseId--2', this.exerciseId)
    this.$getExerciseReport()
  },
  methods: {
    $getTimeStr(seconds) {
      if (!seconds && seconds !== 0) {
        return '--'
      }
      seconds = Number(seconds)
      // 将秒数转换为时分秒格式
      const hours = Math.floor(seconds / 3600)
      const minutes = Math.floor((seconds % 3600) / 60)
      const secs = Math.floor(seconds % 60)

      let result = ''
      if (hours > 0) {
        result += `${hours}小时`
      }
      if (minutes > 0) {
        result += `${minutes}分`
      }
      result += `${secs}秒`

      return result
    },
    async $getExercise() {
      try {
        const { data } = await getExercise({ courseId: this.courseId })
        this.exerciseList = data
      } catch (error) {
        this.$message.error(error.message || '获取练习记录失败，请稍后重试')
      }
    },
    async $getExerciseReport() {
      if (this.exerciseList?.length > 0) {
        this.currExerciseNumber = this.exerciseList.find(it => it.exerciseId === this.exerciseId)?.exerciseNumber
      }
      const { data } = await getExerciseReport({ exerciseId: this.exerciseId })
      this.infos = data
      this.currExerciseNumber = this.infos.exerciseNumber
      if (this.infos?.exerciseFiles) {
        this.infos.exerciseFiles.forEach(it => {
          if (it.isPicture === 1) {
            this.videoInfo.screenshotUrl = apiUrls.resourceUrl + it.filePath
          }
          if (it.fileName.includes('.mp4')) {
            this.videoInfo.url = apiUrls.resourceUrl + it.filePath
          }
        })
      }
      if (this.isFollow && this.infos.exerciseList?.length > 0) {
        this.exerciseList = this.infos.exerciseList
      }
    },
    $previewVideo() {
      if (!this.videoInfo.url) {
        this.$message.error('视频不存在')
        return
      }
      this.videoPreviewModalVisible = true
    },
    $handleCommand(no) {
      this.currExerciseNumber = no
      this.exerciseId = this.exerciseList.find(it => it.exerciseNumber === this.currExerciseNumber)?.exerciseId
      this.$getExerciseReport()
    },
    $restartExercise() {
      // 再练习一次
      if (this.isFollow) {
        this.$emit('restartExercise')
      } else {
        this.$router.push({
          name: 'curriculum.lesson.intro',
          params: {
            courseId: this.courseId,
            lessonId: this.lessonId,
            exerciseType: this.exerciseType,
            pageStatus: 'exercise'
          }
        })
      }
    }
  }
}
</script>
